<!-- 机台-当前状态 -->
<template>
  <div class="container-app">
    <div class="row">
      <div style="width: 200px">
        <div class="row">
          <div
            style="
              font-size: 18px;
              color: #666666;
              font-weight: bold;
              width: 60px;
            "
          >
            站点
          </div>
          <div
            class="btn2"
            style="
              width: 118px;
              background-color: #333333;
              font-weight: bolder;
              text-align: center;
              cursor: pointer;
            "
            @click="addClick"
          >
            +
          </div>
        </div>
        <div
          class="row items-center q-mt-md"
          v-for="(item, i) in list"
          :key="i"
        >
          <div
            style="
              font-size: 18px;
              color: #666666;
              font-weight: bold;
              width: 60px;
            "
          >
            #{{ i }}
          </div>
          <div class="btn2">{{ item }}</div>
        </div>
      </div>
      <div style="flex: 1">
        <div class="row items-center">
          <q-space />
          <div style="margin-right: 50px">
            <span style="color: #666666; font-size: 16px; margin-right: 8px"
              >比较类型</span
            >
            <q-btn label="常规检查" color="grey" size="md" />
            <q-btn label="清洗" color="grey" size="md" class="q-ml-xs" />
            <q-btn label="故障维修" color="grey" size="md" class="q-ml-xs" />
            <q-btn label="全部" color="primary" size="md" class="q-ml-xs" />
          </div>

          <span style="color: #666666; font-size: 16px; margin-right: 8px"
            >比较时间</span
          >
          <q-btn label="年" color="grey" size="md" />
          <q-btn label="月" color="primary" size="md" class="q-ml-xs" />
          <q-btn label="日" color="grey" size="md" class="q-ml-xs" />
          <q-select
            dense
            outlined
            v-model="type3"
            class="q-ml-md"
            bg-color="primary"
            color="white"
            style="width: 150px"
            :options="option"
          ></q-select>
        </div>
        <div
          id="lineChart2"
          class="test-wrepper q-mt-lg"
          :style="[{ width: '100%' }, { height: 770 + 'px' }]"
        ></div>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent } from "vue";
import resize from "src/components/mixins/resize.js";

let chart = null,
  chart2;
export default defineComponent({
  mixins: [resize],
  name: "ceshi1",
  components: {},
  data() {
    return {
      defaultOption: null,
      type: "CYD2023135674",
      type2: "中国-北京-海淀 金隅智造工厂",
      type3: "2023-05",
      option: [2019, 2021, 2022, 2023],
      list: [
        "CYD201989231",
        "CYD201989232",
        "CYD201989233",
        "CYD201989234",
        "CYD201989235",
        "CYD201989236",
        "CYD201989237",
        "CYD201989238",
        "CYD201989236",
        "CYD201989237",
        "CYD201989238",
        "CYD201989236",
        "CYD201989237",
        "CYD201989238",
      ],
    };
  },
  mounted() {
    this.initEcharts();
  },
  methods: {
    addClick() {
      this.list.push("CYD20198923" + (this.list.length + 1));
    },
    // 初始化echarts实例
    initEcharts(chart, chart2) {
      if (this.chart2) {
        this.chart2.dispose();
        this.chart2 = null;
      }
      chart2 = echarts.init(document.getElementById("lineChart2"));
      chart2.clear(); // 因为清空了echarts的数据，所以再次渲染
      chart2.setOption(this.handlerDefaultOption2(), true);
      this.chart2 = chart2;
    },
    handlerDefaultOption2() {
      this.defaultOption = {
        title: {
          text: "运维费用发电比",
          left: "50%",
          textStyle: {
            color: "#333",
            fontSize: 18,
            fontWeight: "bolder",
          },
        },
        grid: {
          left: "5%",
          right: "5%",
        },
        tooltip: {},
        xAxis: {
          data: ["m1", "m2", "m3", "m4", "m5", "m6", "m7", "m8", "m9", "m10"],
        },
        yAxis: {
          name: "单位（元/千瓦时）",
        },
        series: [
          {
            name: "销量",
            type: "bar",
            data: [5123, 2012, 3644, 1023, 120, 2410, 3644, 1023, 120, 2410],
            itemStyle: {
              color: "#E28C00",
            },
          },
        ],
      };

      return this.defaultOption;
    },
  },
});
</script>

<style lang="scss" scoped>
.btn2 {
  color: white;
  padding: 8px 10px 8px 10px;
  border-radius: 2px;
  background: #00cc00;
}
</style>
